<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <!--<link rel="stylesheet" href="css/style.css">-->
    <style>
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .adver {
            margin: 0 auto;
            width: 700px;
            overflow: hidden;
            height: 454px;
            position: relative;
        }

        .page-con {
            position: absolute;
            top: 419px;
            left: 284px;
        }

        .page-con li {
            display: inline-block;
            font-size: 10px;
            line-height: 20px;
            /*font-family: ΢���ź�;*/
            width: 20px;
            height: 20px;
            text-align: center;
            color: rgb(255, 255, 255);
            margin: 0px 1px;
            border-radius: 50%;
            background: rgb(51, 51, 51);
        }

        .cur {
            background: orange !important;
        }
    </style>
</head>

<body>
    <div class="adver">
        <ul class="img-box">     
        </ul>
        <ul class="page-con"></ul>
    </div>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "get",
                url: "./js/json.js",
                async: false,
                success: function (data) {
                    for (let i = 0; i < data.length; i++) {
                        let newHtml = '<li><img src="' + data[i].src + '" alt=""></li>';
                        $(".img-box").append(newHtml);
                        $(".page-con").append('<li>' + (i + 1) + '</li>')
                    }
                    $(".img-box li").not(":first").hide();
        
                },
                dataType: "json"
            })
        
        })
        
        let page = 0;
        let stop = false;
        function silde() {
            if (!stop) {
                page++;
                if (page == 6) {
                    page = 0;
                }
                $(".page-con li").removeClass("cur");//所有底部按钮不改变背景
                $(".img-box li").fadeOut(200);//所有img隐藏  使用fadeOut
        
                $(".page-con li").eq(page).addClass("cur");//相应底部按钮背景改变
                $(".img-box li").eq(page).fadeIn();//相应img显示  使用fadeIn
            }
            setTimeout(silde,3000)
        }
        silde();
        </script>
  
</body>

</html>